<template>
	<view class="im-item-box">
		<!-- 时间开始 -->
		<view class="im-time" v-if="itemMap.datetime">
			{{itemMap.datetime}}
		</view>
		<!-- 时间结束 -->
		<view :class="itemMap.self_side ? 'im-item im-right' : 'im-item im-left'">
			<view class="photo">
				<image :src="itemMap.avatar"></image>
			</view>
			<view class="position-box" @click="handlejumpLink">
				<view class="position-top">
					<view class="top-txt1 substring">{{itemMap.message.title}}</view>
					<view class="top-txt2 substring">{{itemMap.message.address}}</view>
				</view>
				<view class="position-bottom">
					<image src="@/im/static/img/map.png"></image>
				</view>
			</view> 
		</view>
	</view>
</template>
<script>
	import {
		parseTime,
		formatTime
	} from '@/utils/index.js'
	import {DbToGc} from '@/utils/map.js'
	export default {
		props: ['itemMap'],
		data() {
			return {}
		},
		watch: {
			itemMap(val) {
			}
		},
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			},
			interviewTimeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		methods: {
			handlejumpLink() {
				if (!this.itemMap.message.lat || !this.itemMap.message.lng) {
					return false
				}
				let map = DbToGc(this.itemMap.message.lat,this.itemMap.message.lng)
				uni.openLocation({
					latitude: map.lat,
					longitude: map.lng,
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 发送位置开始
	.position-box {
		width: 450rpx;
		height: 282rpx;
		background: #FFFFFF;
		border: 2rpx solid #FFFFFF;
		border-radius: 20rpx 0rpx 20rpx 20rpx;

		.position-top {
			max-height: 126rpx;
			padding: 26rpx 44rpx 26rpx 22rpx;

			.top-txt1 {
				color: #333333;
				font-size: 28rpx;
				margin-bottom: 6rpx;
				font-weight: 500;
			}

			.top-txt2 {
				color: #999999;
				font-size: 26rpx;
			}
		}

		.position-bottom {
			width: 100%;
			height: 190rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 发送位置结束
</style>
